<template>
  <div class="bigBox">
    <div class="box">
      <div class="stepsBox">
        <!-- 进度条 -->
        <el-steps :active="active" align-center finish-status="success">
          <el-step title="填写商品信息" />
          <el-step title="填写商品促销" />
          <el-step title="填写商品属性" />
          <el-step title="选择商品关联" />
        </el-steps>
      </div>
      <!-- 第一个表单 -->
      <oneFrom
        v-show="active == 0"
        @bingnext="next"
        @fromNext="fromNext"
      ></oneFrom>
      <!-- 第二个表单 -->
      <twoFrom
        v-show="active == 1"
        @fromNext="fromNext"
        @bingnext="next"
      ></twoFrom>
      <!-- 第三个表单 -->
      <threeFrom
        v-show="active == 2"
        @bingnext="next"
        @fromNext="fromNext"
      ></threeFrom>
      <!-- 第四个表单 -->
      <fourFrom v-show="active == 3" @bingnext="next"></fourFrom>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as http from "@/request/http";
import { ref } from "vue";
import oneFrom from "../../components/addProductCom/oneFrom.vue";
import twoFrom from "../../components/addProductCom/twoFrom.vue";
import threeFrom from "../../components/addProductCom/threeFrom.vue";
import fourFrom from "../../components/addProductCom/fourFrom.vue";
import { ElMessage } from "element-plus";
// 装表格的数据
let From = ref({
  brandId: 0,
  detailMobileHtml: "",
  feightTemplateId: 0,
  lowStock: 0,
  newStatus: 0,
  prefrenceAreaProductRelationList: [],
  sale: 0,
  deleteStatus: 0,
  price: 0,
  productAttributeCategoryId: null,
  promotionPerLimit: 0,
  skuStockList: [],
  subjectProductRelationList: [],
});
// 进度条
let active = ref(0);

// 获取表格数据
const fromNext = (val: any) => {
  const str = JSON.stringify(val);
  const obj = JSON.parse(str);
  console.log({ ...val });
  From.value = { ...From.value, ...obj };
  console.log(From.value);
};
// 获取我们的进度条的判断
const next = (val: any) => {
  console.log(val);
  // 这里的逻辑是当我们点击下一步的时候表单校验成功之后才进行下一步的页面
  active.value = val;
  if (active.value == 4) {
    console.log("添加请求成功");
    http.addProduct.productCreate(From.value).then((res) => {
      console.log(res);
      if (res.code == 200) {
        console.log(123);
        ElMessage.success("添加成功");
        // 数据清空
        Object.assign(From, {});
        // 页面重新加载
        window.location.reload(); // 刷新页面
      }
    });
    active.value = 0;
  }
};
</script>

<style scoped lang="less">
.bigBox {
  display: flex;
  justify-content: center;

  .box {
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: 0.3s;
    width: 760px;
    margin: auto 0;
    padding: 30px;
    .demo-ruleForm {
      padding: 20px;
    }
    // 进度条
    .stepsBox {
      margin: 10px;
      :deep(.el-step__main .el-step__title) {
        font-size: 14px;
      }
    }
  }
}
</style>
